<template>
  <div>
 <h1>房间列表展示</h1>
    <div>
      酒店名称<input type="text" v-model="info.name"/>
      状态<select v-model="info.state">
      <option value="">请选择</option>
      <option :value="1">开启</option>
      <option :value="0">关闭</option>
    </select>
      <input type="button" value="查询" class="btn btn-primary" @click="getlist"/>
      <input type="button" value="批量删除" class="btn btn-danger" @click="delteall"/>
    </div>
    <table class="table table-bordered">
      <tbody>
      <tr bgcolor="#7fffd4">
        <td><input type="checkbox" v-model="checked" @click="checkedall"/>全选</td>
        <td>酒店酒店</td>
        <td>价格</td>
        <td>酒店服务</td>
        <td>图片</td>
        <td>房间状态</td>
        <td>开业时间</td>
        <td>操作</td>
      </tr>
      <tr v-for="itme in data.list">
        <td><input type="checkbox" v-model="ids" :value="itme.Id"/></td>
        <td>{{ itme.HouseName }}</td>
        <td style="color: red">  ￥{{ itme.Money.toFixed(2)  }}</td>
        <td>{{ itme.HouseSerever }}</td>
        <td><img :src="itme.Photo" width="100" height="100"></td>
        <td>{{ itme.State?"开启":"关闭" }}</td>
        <td>{{ moment(itme.CreateTime).format("YYYY-MM-DD")}} </td>
        <td>
          <input type="button" value="删除" class="btn btn-danger" />
          <input type="button" value="修改" class="btn btn-warning" @click="updatehouse(itme.Id)"/>
        </td>
      </tr>
      </tbody>
    </table>
    <div align="center" class="text-center">
      <span >共几<b>{{data.totalcount}}</b>条</span>
      <span>当前<b>{{info.pageindex}}</b>页</span>
      <span>当前<b>{{info.pageindex}}</b></span>/<span><b>{{data.totalpage}}</b>页</span>

      <input type="button" value="首页" class="btn btn-success" @click="page(1)" />
      <input type="button" value="上一页" class="btn btn-success" @click="page(info.pageindex-1)" />

      <span v-for="item in data.totalpage" @click="page(item)">{{item}}</span>

      <input type="button" value="下一页" class="btn btn-success" @click="page(info.pageindex+1)"/>
      <input type="button" value="尾页" class="btn btn-success"  @click="page(data.totalpage)"/>

      <select v-model="info.pagesize" @change="getlist">
        <option value="">请选择</option>
        <option v-for="itme in arr" :value="itme">每页{{itme}}条</option>
      </select>
      <input type="number" v-model="info.pageindex"/>
      <input type="button" @click="page(info.pageindex)" value="跳转" class="btn btn-warning"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from "axios";
import {useRoute,useRouter} from "vue-router";
import moment from "moment";
const router = useRouter();
const route = useRoute();

onMounted(() => {
  getlist();
})

const updatehouse=(id:any)=>{
  console.log(id)
  router.push({
    path:'/houseupdate',
    query:{id:id},
  });
}

const delteall=()=> {

  let p = confirm("确认删除")
  if (p) {
    axios({
      url: 'http://localhost:5006/api/Room/Delte',
      method: 'delete',
      params: {id: ids.value.toString()},
    }).then(res => {
      if (res.data > 0) {
        alert("删除成功")
        getlist();
      } else {
        alert("删除失败")
      }
    })
  }
}

const checkedall=()=>{

  checked.value=!checked.value;
  if(checked.value==true)
  {
    ids.value=data.list.map((item:any)=>{
      return item.Id;
    });
  }
  else
  {
    ids.value=[];
  }
}


 const page=(num:any)=>{
  if(num<1){
    info.pageindex=1;
    return;
  }
  if(num>data.totalpage){
    info.pageindex=data.totalpage;
    return;
  }
  info.pageindex=num;
   getlist();
 }
//单选
let checked:any=ref(false);
//批量数组
let ids:any=ref([]);

let arr:any=reactive([2,4,6,8,10])
//发送数据
let info:any=reactive({
  pageindex:1,
  pagesize:2,
  name:"",
  state:"",
})
let data:any=reactive({
  totalcount:"",
  totalpage:"",
  list:[],
})
const getlist=()=>{
  axios({
    url:"http://localhost:5006/api/Room/GetAllRoom",
    method:"get",
    params:info,
  }).then((res:any)=>{
    console.log(res)
    data.totalcount = res.data.totalcount;
    data.totalpage = res.data.totalpage;
    data.list = res.data.list;
  })
}
</script>

<style>
span{
  margin: 0 10px;
}
b{
  color: red;
}
</style>